<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<style>
  .fixed-width {
    display: inline-block;
    width: 100px;
  }
</style>
<p id="app"><strong class="fixed-width">CSS选择器：</strong>{{ msg }}</p>
<p id="app2"><strong class="fixed-width">DOM节点：</strong>{{ msg }}</p>
<p id="app3"><strong class="fixed-width">手动挂载：</strong>{{ msg }}</p>
<button onclick="handleMount()">手动挂载</button>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  let vm1 = new Vue({
    el: '#app', // 选择器
    data () {
      return {
        msg: 'Hello World'
      }
    }
  })
  let vm2 = new Vue({
    el: document.getElementById('app2'), // HTMLElement
    data () {
      return {
        msg: 'Hello World'
      }
    }
  })
  let vm3 = new Vue({
    // el: document.getElementById('app3'), // 这里未使用el，而是用其等效用法
    data () {
      return {
        msg: 'Hello World'
      }
    }
  })
  let handleMount = function () {
    vm3.$mount('#app3')
  }
</script>
</body>
</html>